<template>
	<view class="content">
		<view class="bigBox" v-if="!!userData.invite_code">
			<view class="tipBox1">
				<text>{{"我的角色："+userData.remark}}</text>
				<text>{{userData.parent_invite_code?"我的邀请状态：已被"+userData.parent_invite_code+"（"+userData.parent_user_name+"）邀请":"无上级信息"}}</text>
			</view>
		</view>
		<view v-else class="bigBox">
			<view class="tipBox">
				<text>绑定手机号</text>
				<text class="tip2">Hi，欢迎绑定手机号！</text>
			</view>
			<view class="inputBox">
				<text>手机号</text>
				<input type="number" v-model="phoneNumber" />
				<text>密码</text>
				<input type="password" v-model="password" />
				<text v-show="loginType==2">确认密码</text>
				<input type="password" v-show="loginType==2" v-model="password2" />
				<text v-show="loginType==2" style="display: inline;">邀请码</text>
				<text style="display: inline;margin: 0;font-size: 8px;">（ 一经绑定，无法解绑！）</text>
				<input v-show="loginType==2" type="text" v-model="inviteCode" />
			</view>
			<view class="bindBtn">
				<checkbox-group @change="checkPrivacy">
					<label>
						<checkbox value="true" :checked="checkPrivacyFlag" />
						<text class="checkPrivacy" style="margin-left: 10px;">我已阅读并同意</text><text @click="openWebView"
							class="checkPrivacy"
							style="margin: 0;padding: 0;text-decoration: underline;">《用户隐私协议》</text>
					</label>
				</checkbox-group>

				<button @click="bindFun" style="margin-top: 10px;">{{loginType==2?'绑定':'注册'}}</button>
			</view>

			<!-- 	<view class="switchBox">
				<text v-show="loginType==1">没有账号？</text>
				<text class="register" @click="changeType">{{loginType==1?'立即注册':'返回绑定'}}</text>
			</view> -->
		</view>

	</view>
</template>

<script>
	import {
		setInfo,
		parseUserData,
		quit
	} from '../../../hook/auth.js'
	import api from '../../../api/api.js'
	export default {
		data() {
			return {
				loginType: 2, //登录和注册 1登录 2注册
				phoneNumber: '', //手机号
				password: '', //密码
				password2: '', //重复密码
				inviteCode: '', //邀请码
				checkPrivacyFlag: false,
				userData: '', //用户信息
			}
		},
		methods: {
			//同意隐私政策
			openWebView(e) {
				uni.navigateTo({
					url: '/pages/components/webview?url=https://www.pencil-stub.com/html/applet/privacy_agreement.html'
				})

			},
			checkPrivacy() {
				this.checkPrivacyFlag = !this.checkPrivacyFlag
			},
			//绑定事件
			bindFun() {
				if (!this.checkPrivacyFlag) {
					uni.showToast({
						icon: "error",
						title: "请先同意协议"
					})
					return
				}
				const self = this
				let checkRes = this.checkData()
				if (!this.userData.openid) checkRes = "微信id为空"
				if (!this.inviteCode) checkRes = "邀请码必填"

				if (checkRes != true) {
					uni.showToast({
						title: checkRes,
						icon: "error"
					})
				} else {
					const req = {
						username: this.phoneNumber,
						password: this.password,
						invite_code: this.inviteCode,
						weChatId: this.userData.openid
					}
					console.log(req)
					api.bindWechat(req).then(res => {
						console.log(res)
						let type = "success"
						if (res.code == 200 && !!res.saleUserId) {
							//绑定成功
							//1.清除缓存的登录信息
							quit()
							//2.重新登录，存入缓存
							self.reLogin();
							//3.返回上一页
							uni.navigateBack()
						} else {
							type = "none"
						}
						uni.showToast({
							title: res.msg,
							icon: type,
							duration: 2000
						})
					})
				}
			},
			//重新登录，获取新的登录信息
			reLogin() {
				uni.login({
					provider: 'weixin', //获取微信的code
					success: function(loginRes) {
						console.log(loginRes);
						//访问后台获取微信openId
						api.getWeChatId({
							js_code: loginRes.code
						}).then(res => {
							console.log('res', res)
							if (res.code == 200) {
								if (!!res.data.openid) {
									console.log("登录成功")
									setInfo(res.data)
									uni.navigateBack()
								}
							}
						})
					}
				});
			},
			//数据校验
			checkData() {
				//验证手机号正确
				const regex = /^1[3456789]\d{9}$/; // 使用正则表达式检查手机号格式
				// if (!regex.test(this.phoneNumber)) return '手机号不正确'
				if (this.loginType == 2) {
					//密码长度
					if (this.password.length < 6) return '密码过短'
					//验证密码一致
					if (this.password != this.password2) return '两次密码不一致'
					//验证邀请码
					// if (this.inviteCode.length != 5) return '邀请码格式错误'
				}
				return true
			},
			//切换登录注册状态
			changeType() {
				switch (this.loginType) {
					case 1:
						this.loginType = 2;
						break;
					case 2:
						this.loginType = 1;
						break;
				}
			},
		},

		mounted() {
			this.userData = parseUserData()
		}
	}
</script>

<style>
	.tipBox1 text {
		display: block;
	}

	.tipBox1 {
		width: 90%;
		height: 100px;
		padding-top: 50px;
		border-radius: 5px;
		background: rgba(56, 56, 56, 1);
		text-align: center;
		margin: 0 auto;
		line-height: 20px;
		margin-top: 100px;
		font-size: 12px;
		color: rgba(229, 229, 229, 1);
	}

	.register {
		text-decoration: underline;
		color: rgba(166, 166, 166, 1);
	}

	.switchBox {
		margin-top: 30px;
		text-align: right;
		font-size: 12px;
		color: rgba(166, 166, 166, 1);
	}

	.bindBtn button {
		width: 100%;
		height: 56px;
		border-radius: 32px;
		background: rgba(18, 205, 217, 1);
		line-height: 56px;
		font-size: 16px;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
	}

	.bindBtn {
		margin-top: 20px;
	}

	.inputBox input {
		width: 100%;
		height: 55px;
		padding: 0 16px;
		box-sizing: border-box;
		background: transparent;
		border: 1px solid rgba(18, 205, 217, 1);
		font-size: 12px;
		font-weight: 500;
		border-radius: 25px;
		color: rgba(235, 235, 239, 1);
		margin-bottom: 20px;
	}

	.inputBox text,
	.checkPrivacy {
		font-size: 12px;
		font-weight: 500;
		margin-left: 16px;
		color: rgba(235, 235, 239, 1);
	}

	.inputBox {
		margin-top: 40px;
	}

	.tipBox .tip2 {
		display: block;
		margin-top: 8px;
		font-size: 12px;
		color: rgba(166, 166, 166, 1);
	}

	.tipBox text {
		font-size: 16px;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
	}

	.tipBox {
		width: 100%;
		margin-top: 60px;
	}

	.bigBox {
		margin: 0 auto;
		width: calc(100% - 50px);
	}

	.content {
		width: 100%;
		height: 100vh;
		background: rgba(34, 34, 34, 1);
		overflow-x: hidden;
	}
</style>